<template>
	<view class="content">
		<!-- 设置两张背景图片 -->
		<view class="container"></view>
		
		<!-- 卡片容器 -->
		<view class="cardContainer">
			<!-- 浮在背景图片上的邀请新用户卡片 -->
			<view class="card">
				<text class="invateTitle">邀请新用户</text>
				<text style="margin: 12px 0 6px;">您的邀请码为</text>
				<text style="color: #f00;font-size: 1.5em;">{{user.phone}}</text>
				<hr style="width: 80%; margin: 6px 0;">
				<!-- 二维码 -->
				 <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
				 
				<text style="margin: 0 0 5px;font-size: 1.1em;">长按图片即可保存个人专属二维码</text>
			</view>
		
			<!-- 分享此链接 -->
			<text class="share">分享此链接 </text>
			
			<!-- 邀请攻略步骤 -->
			<view class="invationGuide">
				<text class="invationGuideTitle">邀请攻略</text>
				<!-- 邀请攻略里的步骤内容 -->
				<view class="invationGuideContent">
					<view class="step">
						<image class="img" src="../../../static/share1.svg" ></image>
						<text class="stepContent">1、点击按钮，分享链接</text>
					</view>
					<view class="step">
						<image class="img" src="../../../static/share2.png" ></image>
						<text  class="stepContent">2、好友通过您分享的链接，进行授权注册成功</text>
					</view>
					<view class="step" style="margin-bottom: 15px;">
						<image class="img" src="../../../static/coupon.png" ></image>
						<text  class="stepContent">3、您将获得奖励</text>
					</view>
				</view>
				
			</view>
			
			<!-- 我的邀请数据 -->
			<view class="data">
				<text class="dataTitle">我的邀请数据</text>
				<!-- 邀请人数和奖励 :showBorder="false"-->
				<view class="grid">
					<view class="item">
						<text class="text">成功邀请人</text>
						<text>{{invation.number}}</text>
					</view>
					<view class="item">
						<text class="text">奖励积分</text>
						<text>{{invation.integral}}</text>
					</view>
				</view>
				<!-- 分割线 -->
				<u-divider text="我已邀请的好友列表" textSize="1.2em"></u-divider>
				<!-- 好友列表 -->
				<text v-if="Isinvation==true" style="color: #333; font-size: 0.8rem;margin-bottom: 20px;">暂无数据</text>
					<!-- <text >{{invation.number==0?'暂无数据':''}}</text> -->
				<view class="dataList" v-for="item in invation.list">
					<!-- 如果邀请好友数组长度为0则显示暂无数据 -->
					<view class="left">
						<image class="avatar" :src="item.avatar" ></image>
					    <text class="nickname">{{item.name}}</text>
					</view>
					<text class="time">{{item.createTime}}</text>
				</view>
				
				
			</view>
		</view>
		
	</view>
</template>

<script>
import UQRCode from 'uqrcodejs';
import findingApi from '../../../common/FindingService/FindingApi';
import app from '../../../App.vue'
	   
	export default {
		data() {
			return {
				userId:'',
				user:[],
				// 邀请数据
				invation:'',
				// 邀请成功数量,为0是true
				Isinvation:''
			}
		},
		// 二维码onReady是uniapp里的生命周期
		onReady() {
				 // 获取uQRCode实例
				 var qr = new UQRCode();
				 // 设置二维码内容
				 qr.data =this.user.phone;
				 // 设置二维码大小，必须与canvas设置的宽高一致
				 qr.size = 200;
				 // 调用制作二维码方法
				 qr.make();
				 // 获取canvas上下文
				 var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				 // 设置uQRCode实例的canvas上下文
				 qr.canvasContext = canvasContext;
				 // 调用绘制方法将二维码图案绘制到canvas上
				 qr.drawCanvas();
				 
				 // 导出临时文件路径
				    uni.canvasToTempFilePath(
				        {
				            canvasId: 'qrcode',
				            fileType: this.fileType,
				            width: this.canvasWidth,
				            height: this.canvasHeight,
							success: function (res){
								// 调用其他方法处理临时文件路径
								// handleTempFilePath(res.tempFilePath);
								
								/* // app。保存二维码到本地相册.必须在导出临时文件路径成功后再执行保存
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function () {
										console.log('save success');
									}
								}); */
								
								/* H5
								const aEle = document.createElement('a');
								aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
								aEle.href = tempFilePath;
								document.body.appendChild(aEle);
								aEle.click();
								aEle.remove(); */
							},
				        fail: err => {
				            console.log(err);
				        }
				        }, 
				        // this // 组件内使用必传当前实例
				    );
				
			},
			// mounted是vue中的生命周期
		mounted(){
			this.queryFriends()
			this.user = uni.getStorageSync('user');
			console.log('用户电话号码',this.user)
		},
	
		methods: {
			// 获取邀请好友列表和所获积分
			queryFriends(){
				// 从本地缓存中同步获取指定 userId 对应的内容。
				this.userId = uni.getStorageSync('userId');
				console.log('用户id',this.userId)
				
				let params={userId:this.userId}
				findingApi.queryFriends(params).then(res=>{
					console.log('查询邀请好友列表：',res.data.data)
					this.invation=res.data.data
					if(res.data.data.number==0){
						this.Isinvation=true
					}else{
						this.Isinvation=false
					}
					
					for(var i=0;i<this.invation.list.length;i++){
						this.invation.list[i].createTime=this.invation.list[i].createTime.split('T')[0]
						// console.log(this.invation.list[i].createTime)
					}
				})
			},
			
		} 
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
    position: relative;
	 .container {
	  /* 设置容器为全屏 */
	  width: 100vw;
	  height: 35vh;
	   /* 设置第一张背景图 */
	  background-image:url('../../../static/InvitationPoints.png') ;
	   /* 设置背景图片大小为铺满容器*/
	  background-size: cover;
	  background-repeat: no-repeat;
	  z-index: -1;
	  
	}
	/* 可以添加额外的样式来设置第二张背景图 */
	.container::before {
	  z-index: -1;
	  content: "";
	  position: absolute;
	  top: 35vh;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  /* 设置第二张背景图 */
	  background-image:url('../../../static/bg.jpg') ;
	  background-size: cover;
	  // 边框模糊
	  border: 1px solid transparent;
	  filter: blur(1px);
	  background-repeat: no-repeat;
	}
	
	.cardContainer{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -15%;
		/* 邀请新用户和二维码 */
		.card{
			width: 80%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 6px;
			.invateTitle{
				background-color: coral;
				color: #fff;
				border-radius: 0 0 12px 12px;
				padding:5px 10px;
			 }
			
		}
		/* 分享此链接 */
		.share{
			color: #fff;
			text-align: center;
			white-space: nowrap;
			padding: 10px 6px;
			font-size: 1.2em;
			border-radius: 8px;
			background-color: orange;
			margin: 40px 0 30px;
		}
		/* 邀请攻略步骤 */
		.invationGuide{
			width: 100%;
			background-color: #fff;
			border-radius: 5px;
			flex-direction: column; 
			
			
			.invationGuideTitle{
				background-color: #36ab60;
				color: #fff;
				padding: 5px 15px;
				border-radius: 0 0 15px 15px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			.invationGuideContent{
				width: 80%;
				position: relative;
				left: 10%;
				margin-top: 50px;
				
				.step{
					margin-top: 30px;
					display: flex;
					align-items: center;
					
					.img{
						width: 35px;
						height: 35px;
						margin: 0 30px;
					}
					.stepContent{
						font-size: 1.1em
					}
				}
			}
		}
			
		.data{
			width: 100%;
			background-color: #fff;
			margin-top: 80px;
			display: flex;
			flex-direction: column;
			align-items: center;
				
			.dataTitle{
				color: #fff;
				background-color: #36ab60;
				padding: 5px 15px;
				border-radius: 0 0 15px 15px;
	
			}
			.grid{
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 20px 40px;
					.text{
						margin-bottom: 20px;
					}
				}
			}
			
			.dataList{
				width: 70%;
				display: flex;
				align-items: center;
				margin-top: 10px;
				.left{
					display: flex;
					align-items: center;
					width: 70%;
					.avatar{
						width:50px;
						height: 50px;
						border-radius: 50%;
					}
					.nickname{
						width: 240rpx;;
						font-size: 1.2em;
						white-space:nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin: 0 10px;
					}
				}
				.time{
					width: 30%;
					font-size: 1.1em;
				}
			}
			
		}
	}
}

</style>
